<template>
    <section>
        <div class="card">
            <a-form :label-col="{
                style: {
                    width: '80px',
                }
            }" :model="form" ref="formRef" :colon="false">
                <a-form-item label="账户余额">
                    <span class="show-money">￥{{ accountInfo.balance || 0 }}</span>
                </a-form-item>

                <a-form-item label="" style="margin-left: 80px;" name="amount"
                    :rules="[{ required: true, message: '输入其他充值金额' }]">
                    <a-input-number id="inputNumber" style="width:150px;margin-right: 10px;" placeholder="输入其他充值金额"
                        v-model:value="form.amount" :min="1" :max="999999" :precision="0" />
                    <span class="mr-8">
                        <svg-icon name="icon_alipay" class="pay-icon" />
                        <svg-icon name="icon_pay_wechat" class="pay-icon" />
                        支持微信、支付宝扫码支付。
                    </span>
                    <a-button type="link" @click="contactUs">大额充值联系客服。</a-button>
                    <div class="tips" style="color: #FAAD14;"><info-circle-filled
                            style="margin-right: 5px;" />请输入10-999999范围内的数字，必须为整数。
                    </div>
                </a-form-item>

                <a-form-item label="充值余额">
                    <div class="flex">
                        <div class="recharge-list" :class="{ 'select-recharge': index == currentIndex }"
                            v-for="(item, index) in rechargeList" @click="selectmoney(item.money, index)">
                            <div><span class="unit">￥</span><span class="money">{{ item.money }}</span></div>
                            <div class="text">{{ item.text }}</div>
                        </div>
                    </div>
                </a-form-item>

                <a-form-item label="" style="margin-left: 80px;">
                    <div class="recharge-tips">
                        <svg-icon name="icon_ill" style="width: 24px;height: 24px;margin-right: 16px;margin-top: 8px;" />
                        <div>
                            <div class="title">温馨提示</div>
                            <div class="text">充值金额只能用于GPUMall消耗，开票后不可提现</div>
                        </div>
                    </div>
                </a-form-item>

                <a-form-item label="支付金额" class="pay-money">
                    <div style="display: flex;align-items: center;">
                        <span class="show-money mr-8">￥{{ form.amount || 0 }}</span><span class="tips"
                            style="margin-top: 0;">充值1元获得1成长值<span @click="router.push('/memberBenefits')" class="ml-8"
                                style="color: #07F;">会员体系</span></span>
                    </div>
                </a-form-item>

                <a-button @click="recharge()">下一步</a-button>

            </a-form>
        </div>

        <a-modal v-model:visible="modalVisible" title="支付" @ok="handleOk" @cancel="handleCancel">
            <a-form class="query-list-form">
                <a-form-item label="支付金额">
                    <div style="display: flex;align-items: center;">
                        <span class="show-money mr-16">￥ {{ form.amount || 0 }}</span>
                        <span class="tips" style="margin-top: 0;">充值1元获得1成长值<span @click="router.push('/memberBenefits')"
                                class="ml-8" style="color: #07F;">会员体系</span></span>
                    </div>
                </a-form-item>

                <div style="margin-bottom: 24px;">
                    <svg-icon name="icon_alipay" class="pay-icon" />
                    <svg-icon name="icon_pay_wechat" class="pay-icon" />
                    支持微信、支付宝扫码支付。
                </div>

                <div class="code-img">
                    <QrCode :el="data.cashierUrl" v-if="data.cashierUrl" />
                </div>
            </a-form>
        </a-modal>

        <!-- 联系客服 -->
        <a-modal v-model:visible="payVisible" title="联系我们">
            <div style="text-align: center;">
                <img style="width: 300px;height: 400px;" :src="handleImg('console/contact-us.png')" alt="">
            </div>
        </a-modal>

    </section>
</template>
<script setup>
import { ref } from 'vue'
import { onlineRecharge, checkRechargeApi } from 'api/modules/api.recharge'
import {
    InfoCircleFilled,
} from '@ant-design/icons-vue';
import { useRouter, useRoute } from 'vue-router'
import { ZyNotification } from '@/libs/util.toast'
import { storeToRefs } from 'pinia'
import userInfoStore from '@/stores/userInfo.js'
import QrCode from '@/components/common/QrCode.vue'
const useUserInfoStore = userInfoStore()
const { accountInfo } = storeToRefs(useUserInfoStore);
const router = useRouter()

const form = ref({})
const rechargeList = [
    { money: 50, text: '成长值加50' },
    { money: 100, text: '成长值加100' },
    { money: 300, text: '成长值加300' },
    { money: 500, text: '成长值加500' },
    { money: 1000, text: '成长值加1000' },
]

// 选择充值金额  
const currentIndex = ref()
const selectmoney = (money, index) => {
    currentIndex.value = index
    form.value.amount = money
}

// 下一步
const modalVisible = ref(false)
const formRef = ref()
const data = ref({})
const recharge = () => {
    data.value.cashierUrl = null
    formRef.value.validateFields().then(() => {
        onlineRecharge(form.value).then(res => {
            if (res.code == 0) {
              
                data.value = res.data
                modalVisible.value = true
                checkRecharge(res.data.orderId)
            }
        })
    })
}

// 检查支付状态
let refresTimer = null
const checkRecharge = function (orderId) {
    if (refresTimer) {
        clearInterval(refresTimer)
    }

    refresTimer = setInterval(() => {
        checkRechargeApi(orderId).then(res => {
            if (res.code == 0) {
                if (res.data.status == 2) {
                    clearInterval(refresTimer)
                    refresTimer = null
                    userInfoStore().getAccountInfo().then(() => { })
                    ZyNotification.success('支付成功')
                    modalVisible.value = false
                } else if (res.data.status == 3) {
                    clearInterval(refresTimer)
                    refresTimer = null
                    ZyNotification.error('支付失败')
                    modalVisible.value = false
                }
            }
        }).catch((err) => {
            clearInterval(refresTimer)
            refresTimer = null
        })
    }, 2000)
}

// 关闭充值弹窗
const handleOk = () => {
    modalVisible.value = false
    clearInterval(refresTimer)
    refresTimer = null
}

const handleCancel = () => {
    modalVisible.value = false
    clearInterval(refresTimer)
    refresTimer = null
}

// 联系客服
const payVisible = ref(false)
const contactUs = () => {
    payVisible.value = true
}


</script>

<style lang="less" scoped>
.show-money {
    color: #FAAD14;
    font-family: PingFang SC;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.tips {
    color: #8A93A7;
    font-family: PingFang SC;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    margin-top: 8px;
}

.pay-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
}

.card {
    background: #fff;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0px 4px 4px 0px #E7EDF8;

    .recharge-list {
        width: 190px;
        height: 112px;
        background: url('@/assets/img/console/pay-selecr-bg.png');
        background-size: 100% 100%;
        text-align: center;
        padding-top: 20px;
        margin-right: 20px;
        cursor: pointer;

        .unit {
            color: #223354;
            font-family: PingFang HK;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        .money {
            color: #223354;
            font-family: PingFang HK;
            font-size: 36px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        .text {
            color: #8A93A7;
            font-family: PingFang HK;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-top: 16px;
        }
    }

    .select-recharge {
        background: url('@/assets/img/console/pay-bg.png');
        background-size: 100% 100%;

        .unit {
            color: #FAAD14;
        }

        .money {
            color: #FAAD14;
        }

        .text {
            color: #67240D;
        }
    }

    .recharge-tips {
        width: 616px;
        height: 104px;
        flex-shrink: 0;
        stroke-width: 1px;
        background: #FFFBE6;
        display: flex;
        margin-bottom: 4px;
        padding: 16px 24px 0;
        border-radius: 4px;
        border: 1px solid #FFE58F;

        .title {
            color: #223354;
            font-family: PingFang HK;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
        }

        .text {
            color: #8A93A7;
            font-family: PingFang SC;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;

        }
    }
}

.code-img {
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 auto;
}
</style>